<!DOCTYPE HTML >
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>SketchBook</title>
		
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!--<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0; target-densitydpi=medium-dpi;" />-->

		<style type="text/css" media="screen">@import "../jqtouch-1.0-beta-2-r109/themes/apple/theme.min.css";</style>
		<style type="text/css" media="screen">@import "../jqtouch-1.0-beta-2-r109/themes/apple/theme.css";</style>
		
		<script src="../jqtouch-1.0-beta-2-r109/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../jqtouch-1.0-beta-2-r109/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
		
		<script type="text/javascript" charset="utf-8">
		   var jQT = new $.jQTouch({
	        icon: '../apple-touch-icon.png',
	        addGlossToIcon: false,
	        startupScreen: '../apple-touch-startup-image.png',
	        statusBar: 'black',
	        preloadImages: [
		            '../jqtouch-1.0-beta-2-r109/themes/apple/img/backbutton.png',
		            '../jqtouch-1.0-beta-2-r109/themes/apple/img/chevron.png',
		            '../jqtouch-1.0-beta-2-r109/themes/apple/img/whiteButton.png',
		            '../jqtouch-1.0-beta-2-r109/themes/apple/img/loading.gif'
		            ]
		    });
			</script>
			<script type=text/javascript>        
			var mode;
			var canvas;
			var context;
			window.onload = function ()
			{
				if(document.getElementById("canvas").getContext("2d")){
					mode = 1;
					canvas = document.querySelector("#canvas");		
					context = canvas.getContext("2d");		// CanvasRenderingContext2D 
				}
				else
				{
					var ffb = new Image();
					ffb.src = "http://www.mozilla.org/products/firefox/buttons/getfirefox_large2.png";
					document.getElementById("home").style.display = "none";
					document.getElementById("noCanvas").style.display = "";
					document.getElementById("ffbutton").src = ffb.src; 
				}
				
				document.getElementById("back").onclick = function ()
				{
					location.href = "../menu.html";
				}
				
				// touch start
				canvas.addEventListener("touchstart", function(event) {
					var touch = event.touches[0];
				
					context.beginPath();
					if(mode == "eraser")
					{
						context.strokeStyle = "rgb(255,255,255)";
						context.lineWidth = 10;
					}
					else
					{
						context.strokeStyle = color;		
						context.lineWidth	= lineWeight;
					}
					context.moveTo(touch.pageX, touch.pageY); 
				}, false);
				
				// touch move
				canvas.addEventListener("touchmove", function(event) {
				    event.preventDefault();
					context.lineTo(event.touches[0].pageX, event.touches[0].pageY);
					context.stroke();
				},false);
				// touch end
				canvas.addEventListener("touchend", function(event) {
					//document.querySelector("#touchLog").innerHTML = "[END] touches.length : " + event.touches.length;
		
					context.closePath();
					context.save();
					
				},false);
				// touch cancel
				canvas.addEventListener("touchcancel", function(event) {
					// touch start 들어온후에 touchEnd가 안일어나고 끝난경우... 
					// 예를들어 touchmove에서 alert() 띄우면 touchcancel 이벤트가 발생함.
		
					context.closePath();
					context.save();
		
					//document.querySelector("#touchLog").innerHTML = "[CANCEL] touches.length : " + event.touches.length;
				},false);		
			}		
			
			
				$(function()
				{
					$("#canvas").width( document.getElementById("canvas").width );
				});
	
				// 색상
				var color = $("div input:eq(0)").css("background-color");
				$("#color").click(function(event)
				{
					mode = "draw";
					color = $(this).css("background-color");
				});
				
				//라인 두께
				var lineWidth = $("#lineWeight").val();
				$("#lineWeight").change(function (evt)
				{
					mode = "draw";
					lineWidth = $(this).val();
				})
				
				// 지우개
				$("#eraser").click(function(event)
				{
					mode = "eraser";
				});
				
				// 모두지우기
				$("#new").click(function(event)
				{
					context.clearRect(0,0, $("#canvas").width(), $("#canvas").height() );	
					$(this).blur();
				});
				
				$("#save").click(function (event)
				{
					var myImage = document.getElementById('myImage');
				  	myImage.src = canvas.toDataURL();
					document.getElementById("userImage").style.display="";
				});	
		
		</script>
		<style>
			 * 
			 {
		       -webkit-text-size-adjust: none;
			    -webkit-tap-highlight-color: rgba(0,0,0,0);
				overflow-x:hidden;	
				overflow-y:auto;
	 	     }
			#noCanvas
			{
				font-size : 30px;
				font-style:oblique;
				font-family: "AppleGothic";	
			}
			#canvas
			{
				border:1px solid:#AAAAAA;
				background-color:#FFFFFF;
				overflow-y:scroll;
			}
			div input
			{
				width:30px;
				height:30px;
			}
			#buttons
			{
				height:35px;
				width:35px;
			}
		</style>
	</head>	
	<body>
		<div class="home" id="Body">
			<canvas id="canvas" height="460px" width="320px"></canvas>
			<img id="myImage">
			
			<select id="lineWeight">
				<option value="1"  selected>1</option>
				<option value="2">2</option>
				<option value="4">4</option>
				<option value="8">8</option>
				<option value="16">16</option>
				<option value="32">32</option>
			</select>

			<div id="color">
				<input type="button" alt="black" style="background-color:#000000;" />
				<input type="button" alt="gray1" style="background-color:#333333;" />
				<input type="button" alt="gray2" style="background-color:#666666;" />
				<input type="button" alt="gray3" style="background-color:#999999;" />
				<input type="button" alt="gray4" style="background-color:#CCCCCC;" />
				<input type="button" alt="white" style="background-color:#FFFFFF;" />
				<input type="button" alt="red" style="background-color:#ff0000;" />
				<br />				
				<input type="button" alt="orange" style="background-color:#FF7F00;" />
				<input type="button" alt="yellow" style="background-color:#FFFF00;" />
				<input type="button" alt="green" style="background-color:#009900;" />
				<input type="button" alt="blue" style="background-color:#0099FF;" />
				<input type="button" alt="darkblue" style="background-color:#082567;" />
				<input type="button" alt="purple" style="background-color:#8000FF;" />
			</div>		
			<div id = "buttons" class="footer">
			<button type="button" class="buttons" id="new" ><img src="icon_new.png" alt="new" name="new" /></button>
			<button type="button" class="buttons" id="eraser"><img src="icon_eraser.png" alt="eraser" name="eraser"/></button>
			<button type="button" class="buttons" id="save"><a href="#userImage"><img src="icon_save.png" alt="save" name="save" /></a></button>
			<ul class="rounded">
					<li class="forward" id="back"><a>Back</a></li>
			</ul>
			</div>
			
			<div id="userImage" style="display:none;">
				<img src=myImage.src alt="userimag" name="userimg"/>
			</div>
		</div>
		
		<!-- When the browser doesn't support <canvas> tag -->
		<div id="noCanvas" style="display:none;">
			<center>This browser doesn't support the canvas tag.</center>
			<center><a href="http://www.getfirefox.net/"title="Get Firefox - Web browsing redefined.">
					<img id="ffbutton" src="" alt="Get FireFox"/>
					</a>
			</center>
		</div>
	</body>
</html>
